<template>
  <!-- 技术前沿领域分析 -->
  <div>
    <canvas id="mycanvas" width="1000" height="1000"  ></canvas>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { resize, spaceTxt } from "@/utils/utils";
import { d } from './qyj.js'
export default {
  name:'QYJ',
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartsData: {
      type:Array
    },
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
      imageData:[],
      title:[],
    };
  },
  computed: {
    ...mapState(["techAnalysisKeyWords"]),
  },  
  watch: {
    chartsData(){
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      this.inittool();
      this.getData();
    },
    getData(){
      this.title = [
        {
          x:111,
          y:97,
          label:'aaa',
        },{
          x:211,
          y:197,
          label:'bbb',
        },{
          x:211,
          y:297,
          label:'ccc',
        },{
          x:371,
          y:21,
          label:'ddd',
        },{
          x:481,
          y:221,
          label:'eee',
        },{
          x:511,
          y:121,
          label:'fff',
        }
      ]
      // let chartData = this.chartsData
      this.initCharts(d);
    },
    initCharts(data) {
      // 找到该canvas节点
      var c = document.getElementById('mycanvas')
      // 创建文本对象
      var context = c.getContext('2d')
      // 遍历热力图数据
      data.forEach(point => {
        // 解构赋值
        const { x, y, value } = point
        // 开始画圆
        context.beginPath()
        // 通过art方法画圆，x-起始点x坐标，y-起始点y坐标，30-圆半径，0-初始角度，2*Math.PI最终角度实际上就是360度
        context.arc(x, y, 80, 0, 2 * Math.PI)
        context.closePath()
        // 创建渐变色: r,g,b取值比较自由，我们只关注alpha的数值，这里是径向渐变，xy都代表圆点位置，只不过一个半径是0一个半径是30
        const radialGradient = context.createRadialGradient(x, y, 0, x, y, 40)
        // 渐变
        radialGradient.addColorStop(0.0, 'rgba(0,0,0,1)')
        radialGradient.addColorStop(1.0, 'rgba(0,0,0,0)')
        // 填充渐变色
        context.fillStyle = radialGradient
 
        // 设置globalAlpha: 需注意取值需规范在0-1之间，我们这里的14是value的最小值，100是value的最大值，可以自行调整
        const globalAlpha = (value - 14) / (100 - 14)
        context.globalAlpha = Math.max(Math.min(globalAlpha, 1), 0)
        // 打印看到每个圆的灰色值是不一样的，然后每个像素叠加的地方也会累积灰度值，这就是核心原理
        // 填充颜色
        context.fill()
        // 像素着色，获取我们整个画布的所有像素点的rgba
        const imageData = context.getImageData(0, 0, 1000, 800)
        const data = imageData.data
        // rgba，a在第四个所以我们只看a
        for (var i = 3; i < data.length; i += 4) {
          const alpha = data[i]
          // 根据a的值，来找我们彩色映射带的值，将彩色映射带的值重新赋予该canvas的imgdata
          const color = this.colorPicker(alpha)
          data[i - 3] = color[0]
          data[i - 2] = color[1]
          data[i - 1] = color[2]
        }
        context.putImageData(imageData, 0, 0)
      })
      //画文本
      this.title.map(item => {
        context.beginPath();
        context.font = `16px 微软雅黑`;
        context.fillStyle = "#000";
        //剧中
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(item.label,item.x,item.y); //实心文本
        // context.strokeStyle = "blue"; //镂空文字颜色
        // context.strokeText("canvas学习", 100, 300); //空心文本
        context.closePath();
      })
    },
        // 初始化彩色映射带
    
    inittool(){
      // 定义彩色映射带的渐变值
      const colorstops = {
        0.2: 'rgb(100 233 186)',
        0.3: 'rgb(254,187,83)',
        0.4: 'rgb(252, 195, 60)',
        0.6: 'rgb(254, 253, 130)',
        0.8: 'rgb(235, 7, 7)',
        0.9: 'rgb(255, 255, 222)',
        1.0: 'rgb(255, 255, 222)',
      }
      // 这里显示彩色映射带
      const canvas = document.createElement('canvas')
      canvas.width = 240
      canvas.height = 30
      const ctx = canvas.getContext('2d')
      const linearGradient = ctx.createLinearGradient(0, 0, 256, 30)
      for (const key in colorstops) {
        linearGradient.addColorStop(key, colorstops[key])
      }
      ctx.fillStyle = linearGradient
      ctx.fillRect(0, 0, 240, 30)
      // 我们取彩色应色带height设为1，因为多取也用不到，只需要第一行像素点的rgba
      this.imageData = ctx.getImageData(0, 0, 250, 1).data
      document.body.appendChild(canvas)
    },
    colorPicker(position) {
      // 这里根据a的值也就是灰度值来截取对应彩色映射带的值，a值越小，对应的彩色映射带的值越靠前
      return this.imageData.slice(position * 4, position * 4 + 3)
    }
    
  },
  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>